<template>
  <div style="padding:20px;">
    <div style="margin-top:20px"></div>
    <el-table
      ref="print"
      :data="liebiao"
      border
      style="width: 100%; :align"
      v-loading="loading"
    >
      <el-table-column
        align="center"
        label="账号名称"
        prop="account"
      ></el-table-column>
      <el-table-column
        align="center"
        label="公司名称"
        prop="name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="账号id"
        prop="id"
      ></el-table-column>

      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
      ></el-table-column>

      <!-- <el-table-column v-if="noprint" align="center" label="操作" width="300"> -->
      <!-- <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)"
            >添加账号</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template> -->
      <!-- </el-table-column> -->
    </el-table>
    <!-- 编辑列表 -->
    <el-dialog title="编辑信息列表" :visible.sync="aa">
      <el-form :model="ruleForm" ref="ruleForm">
        <el-form-item label="账号名称" prop="account" width:180px>
          <el-input v-model="ruleForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="name" width:180px>
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号id" prop="id" width:180px>
          <el-input v-model="ruleForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建日期" prop="createTime" width:180px>
          <el-input v-model="ruleForm.createTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- :rules="12345" -->
    <el-dialog title="添加账号" :visible.sync="bb">
      <el-form
        :model="ruleForm1"
        ref="ruleForm1"
        label-width="115px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号名称" prop="account">
          <el-input v-model="ruleForm1.account" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司id" prop="cid">
          <el-input v-model="ruleForm1.cid" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm1.password" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色" prop="roleName">
          <el-input v-model="ruleForm1.roleName" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="联系方式" prop="telephone">
          <el-input v-model="ruleForm1.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="等级" prop="telephone">
    写死的
          <el-input v-model="ruleForm1.telephone" autocomplete="off"></el-input>
        </el-form-item> -->

        <el-form-item label="角色" prop="proType">
          <el-select v-model="ruleForm.role" placeholder="请选择项目类型">
            <el-option
              type="string"
              v-for="item in jiaose"
              :key="item.label"
              :label="item.value"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="角色" prop="telephone">
          <el-option
            v-for="item in jiaose"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="submitForm1('ruleForm1')"
            >立即创建</el-button
          >
          <el-button @click="guanbi()">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分页页面 -->
    <v-pagination
      style="margin-top:20px"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :total="total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { hqfgs } from "@/api/zuzhijiagou";
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import axios from "axios";
import { ymd, ym } from "@/api/date";
export default {
  name: "DragTable",

  data() {
    return {
      // 项目列表的内容
      ruleForm: [],
      ruleForm1: [],
      noprint: true,
      liebiao: [],
      loading: false,
      soltid: "",
      pm: {
        cid: "",
        page: 1,
        pageSize: 10
      },
      // 显示编辑页面
      aa: false,
      bb: false,
      // 添加识别id
      tianjiaid: "",

      pageIndex: 1,
      pageSize: 10,
      total: 1,
      nowdata: ymd(),
      jiaose: [
        {
          label: 1,
          value: "管理人员"
        },
        {
          label: 2,
          value: "财务人员"
        },
        {
          label: 3,
          value: "项目人员"
        }
      ]
    };
  },
  created() {
    var id = getid();
    this.pm.cid = id;
    console.log("这是");
    console.log(id);
    this.findList();
  },
  methods: {
    findList() {
      var resdata = {
        // cid: this.pm.cid,
        page: this.pageIndex,
        pageSize: this.pageSize
        // token: getToken()
      };
      // 调用后台接口
      request(`/account/select`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      })
        .then(res => {
          console.log("奥利给 项目列表接口返回数据");
          console.log(res);
          console.log(res.data.object);
          console.log("奥利给 项目列表接口返回total数据");
          this.total = res.data.total;
          console.log(this.total);
          this.liebiao = res.data.object;
          //   this.total = res.data
          // console.log(res.data.object[0]);
          console.log("奥利给 查看本地列表");
          console.log(this.liebiao);
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    //添加的操作
    handleEdit1(index, row) {
      console.log(index, row);
      this.bb = true;
      console.log(row);
      this.ruleForm1 = row;
      console.log(row);
      this.tianjiaid = row.id;
    },
    // 编辑的操作
    handleEdit(index, row) {
      console.log(index, row);
      this.aa = true;
      this.ruleForm = row;
      console.log(this.ruleForm);
      console.log(row);
    },
    // 删除的操作
    // /company/del/{id}
    handleDelete(index, row) {
      var that = this;
      console.log(index, row);
      this.$confirm("此操作将永久删除该分公司, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request(`/person/del/${row.id}`, {
            method: "get",
            headers: {
              "Content-Type": "application/json"
            },
            params: ""
          })
            .then(res => {
              if (res.data.code) {
                that.$message.success("删除成功");
              }
              console.log(res);

              that.findList();

              // console.log("删除成功!并重新渲染首页信息");
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查询单独的分公司
    cxid() {
      var that = this;

      if (this.soltid == "") {
        this.findList();
      } else {
        request(`branch/find/${this.soltid}`, {
          method: "get",
          headers: {
            "Content-Type": "application/json",
            token: getToken()
          },
          params: ""
        }).then(res => {
          console.log(232323);
          console.log(res.data.object);
          this.tableData = res.data.object;
          this.$message({
            type: "success",
            message: "加载成功!"
          });
        });
      }
    },
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    },

    // 添加账号过程
    submitForm1(formName) {
      // console.log(this.ruleForm1);
      var tianjiaxinxi = this.ruleForm1;
      tianjiaxinxi.cid = this.tianjiaid;
      tianjiaxinxi.level = 4;
      console.log(tianjiaxinxi);

      this.$refs[formName].validate(valid => {
        if (valid) {
          // b编辑
          var that = this;
          request("/person/add", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            data: tianjiaxinxi
          }).then(function(response) {
            that.bb = false;
            console.log("添加账号接口成功");

            console.log(response);
            that.findList();
            that.$message.success("添加成功");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑删除的操作
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // b编辑
          var that = this;
          request("/person/update", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            data: this.ruleForm
          }).then(function(response) {
            that.aa = false;
            that.$message.success("编辑成功");
            console.log("编辑成功");
            console.log(response);
            that.findList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.aa = false;
    },
    guanbi() {
      this.bb = false;
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-alert__content {
  width: 100%;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 50%;
} */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-alert__content {
  width: 100%;
}
</style>
